﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <style type="text/css">
        .test_demo_clip {

            overflow: hidden;
            white-space: nowrap;
            width: 200px;
            background: #ccc;
        }

        .test_demo_ellipsis {

            overflow: hidden;
            white-space: nowrap;
            width: 200px;
            background: #ccc;
        }
    </style>
</head>
<body>
    <h2 style="text-shadow:20px 12px 2px #333;">文本的阴影效果：山外青山楼外楼</h2>

    <h2>text-overflow : clip </h2>
    <div class="test_demo_clip">
        不显示省略标记，而是简单的裁切条
    </div>
    <h2>text-overflow : ellipsis </h2>
    <div class="test_demo_ellipsis">
        显示省略标记，不是简单的裁切条
    </div>
</body>
</html>
